<template>
  <div id="map-container" style="height: 100vh;">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="tileLayerUrl"></l-tile-layer>
      <l-polyline :lat-lngs="polylineData" :options="polylineOptions"></l-polyline>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer, LPolyline } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';
import userApi from "../../api/sys";

export default {
  components: {
    LMap,
    LTileLayer,
    LPolyline,
  },
  data() {
    return {
      zoom: 13,
      center: [46.32615683, 130.6102292],
      tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      polylineData: [],
      polylineOptions: {
        color: 'yellow',
        smoothFactor: 10,
      },
      dataList: [],
    };
  },
  methods: {
    getList() {
      userApi.listRegular().then((resp) => {
        this.dataList = resp.data.rows;
        if (this.dataList.length > 0) {
          this.center = [this.dataList[0].latitude, this.dataList[0].longitude]; // 设置中心点为第一个元素的x和y
        }
        this.updatePolylineData();
      });
    },
    updatePolylineData() {
      this.dataList.forEach(item => {
        this.polylineData.push([item.latitude, item.longitude]);
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style>
#map-container {
  height: 400px;
}
</style>